﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
	<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/common.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/settings.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/jquery-ui-themeroller.css" type="text/css" media="screen" title="Flora (Default)">
    <link rel="stylesheet" href="css/farbtastic/farbtastic.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-personalized-1.5.2.min.js"></script>
    <script type="text/javascript" src="js/farbtastic.js"></script>
    <script type="text/javascript" src="js/settings.js"></script>
    
</head>
<body>
  
        <div id="tabs">
            <ul>
                <li class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><span>General</span></a></li>
                <li class="ui-tabs-nav-item"><a href="#fragment-2"><span>Design</span></a></li>
				<li class="ui-tabs-nav-item"><a href="#fragment-3"><span>About</span></a></li>
            </ul>
            <div id="fragment-1" class="fragment">
                <h3>Message Log View</h3>
                <ul>
                    <li>
                        <input id="showSystemMessage" type="checkbox"  />
                        <label for="showSystemMessage">Show system messages.</label>
                        
                    </li>
                </ul>
                <h3>Friend List View</h3>
                <ul>
                    <li>
                        <input id="hideOfflineUser" type="checkbox" />
                        <label for="hideOfflineUser">Hide offline users.</label>
                    </li>
                </ul>            </div>
            <div id="fragment-2" class="fragment">
                <h3>Message Log View</h3>
                <ul>
                    <li>
                         <label for="fontSize">Font Size</label>
                         <select id="fontSize">
                            <option>8px</option>
                            <option>9px</option>
                            <option>10px</option>
                            <option>11px</option>
                            <option>12px</option>
                            <option>14px</option>
                            <option>16px</option>
                            <option>20px</option>
                            </select> 
                         <div id="font-size-slider"></div>
                    <li>
                    <li>
                        <input id="colorMessageSending"  type="text" class="has-color-picker" maxlength=7 readonly="true" />
                        <label for="txtColorMessageSending">Sending message color</label>
                    </li>
                    <li>
                        <input id="colorMessageSent" type="text" class="has-color-picker" maxlength=7 readonly="true" />
                        <label for="colorMessageSent">Sent message color</label>
                    </li>
                    <li>
                        <input id="colorMessageReceived" type="text" class="has-color-picker" maxlength=7 readonly="true" />
                        <label for="colorMessageReceived">Recieved message color</label>
                        
                    </li>
                    <li>
                        <input id="colorMessageRead" type="text" class="has-color-picker" maxlength=7 readonly="true" />
                        <label for="colorMessageRead">Read message color</label>
                    </li>
                </ul>
                
            </div>
			<div id="fragment-3" class="fragment">
				<h3>About</h3>
				<ul>
					<li><span class="about-label">AppName:</span> Skype Vista Gadget</li>
					<li><span class="about-label">Version:</span> <span id="version"></span></li>
					<li><span class="about-label">Project Page:</span> <span id="project-page"></span></li>
				</ul>
				<br/>
				<p>
					Please post feedbacks or report bugs.
				</p>
			</div>
        </div>
        
</body>
</html>
